<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="#0A5AF9">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" href="../css/mui.css" />
    <link rel="stylesheet" href="../css/public-head.css" />
    <link rel="stylesheet" type="text/css" href="../css/Wallet.css"/>
</head>

<body>
    <div class="Zhangice">
        <div class="wall-1">
            <p>我的余额&nbsp;(元)</p>
            <span id="wallet_balance">888.000</span>
        </div>
        <div class="wall-2">
            <div class="wa-1">
                <div class="red-1">充余额</div>
                <div class="red-2">
                    <div>智能养车,限时优惠</div>
                </div>
            </div>
            <div class="recharge" id="recharge">
                <!--<div class="white blue">100元<br/><span>售价:99.00元</span></div>
                <div class="white">200元<br/><span>售价:198.00元</span></div>
                <div class="white">300元<br/><span>售价:297.00元</span></div>
                <div class="white">500元<br/><span>售价:490.00元</span></div>
                <div class="white">1000元<br/><span>售价:980.00元</span></div>
                <div class="white">2000元<br/><span>售价:1950.00元</span></div>
                <div class="white">5000元<br/><span>售价:4900.00元</span></div>
                <div class="white">10000元<br/><span>售价:9800.00元</span></div>
                <div class="white">20000元<br/><span>售价:19500.00元</span></div>-->
            </div>
        </div>
        <div class="reality">
            <div class="reality-1">实际到账: ￥<span id="actual">0.00</span></div>
            <div class="reality-2">支付金额：<span>￥</span><span id="zhif">0.00</span></div>
        </div>

        <div class="bg-list">

            <div class="list">

                <div class="list_word">

                    <div>支付方式</div>
                </div>

                <div class="list_no">
                    <div>在线支付<span class="list_no_img">
                      <!-- <img src="../image/icon/ARROWRIGHT@2x.png" alt="" /> -->
                    </span></div>
                </div>
            </div>
        </div>
        <div class="affirm"><button id="button" tapmode onclick="ConfirmRecharge()">确认充值</button> </div>
        <!--弹窗-->
        <!--<div class='demo'>
            <div class='demo-bg'>
                <div class='demo-txt' tapmode onclick="closeDialog()">
                	<span style="width: 26px;height:26px;float:right;margin:5px 5px 0 0;"><img style="width:100%;height:100%;" src="../image/icon/cdacha.png" alt=""></span>
                    <p>充值成功 !</p>
                    <a href="mine_2.html">返回首页</a>
                </div>
            </div>

        </div>-->
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/public-head.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script type="text/javascript" src="../script/rem.js"></script>
<script src="../script/template-web.js"></script>
<!--获取钱包充值卡列表-->
<script type="text/html" id="walletBag">
	{{each data as val i}}
	<div name="{{val.market_price}}-{{val.pay_amount}}" class="white btn" tapmode onclick="fnWalletBtn({{i}},{{val.id}})">{{val.title}}
	<br/>
	<span>售价:{{val.pay_amount}}元</span>
	</div>
	{{/each}}
</script>

<script type="text/javascript">
	apiready = function() {
		init();
        wallet();
        balance();
    }
    headInner({
        title: "钱包",
        //headleft
        headl: '<a href="#" style="color:white" class="mui-icon mui-icon-left-nav" tapmode onclick="api.closeWin()"></a>',
        //headright
        headr: '<a style="color:white" tapmode onclick="bill()">账单</a>',
        color: "", //默认是蓝色
        padding: "0px 0px 0px",
    })

    // 钱包余额
    function balance() {
      BASE.MYajax({
            'pathName': 'users/getUserInfo', //请求路径
            'methods': 'get',
            'method':balanceData //调用函数
        });
    }
    function balanceData(ret,err) {
      console.log(JSON.stringify(ret));
      if(ret.code==200){
        $api.byId('wallet_balance').innerHTML=ret.data.wallet;
      }else{
        reToast(ret,err)
      }
    }

    var card_id;
     //获取钱包充值卡列表
    function wallet() {
        BASE.MYajax({
            'pathName': 'recharge/index',
            'method': walletData //调用函数
        });
    }
    function walletData(ret, err) {
        if (ret.code == 200) {
            console.log("充值多少钱" + JSON.stringify(ret));
            var wallethtml = template('walletBag', ret);
            document.getElementById('recharge').innerHTML = wallethtml;
        } else {
            reToast(ret, err)
        }
    }

    function mine_2() {
        api.openWin({
        	name: 'mine_2',
        	url: '../html/mine_2.html'
        });
    }

    function bill() {
        api.openWin({
            name: 'bill',
            url: '../html/bill.html'
        });
    }

    //弹窗
    var demobg = document.querySelector(".demo-bg");
    var demotxt = document.querySelector(".demo-txt");

    //选择充值卡
    function fnWalletBtn(index_,id){
    	var btn = document.getElementsByClassName('btn');
    	for(var i = 0 ; i < btn.length; i++){
    		if(i != [index_]){
    			btn[i].classList.add('class', "white");
            	btn[i].classList.remove('class', 'blue');
    		}else{
    			btn[i].classList.add('class', 'blue');
           		btn[i].classList.remove('class', "white");
           		var contain = btn[i].getAttribute('name').split('-');
           		var actual = document.getElementById('actual');
           		var zhif = document.getElementById('zhif');
           		actual.innerHTML = contain[0];
           		zhif.innerHTML = contain[1];
           		//获取id
           		card_id = id;

    		}
    	}
    }

    //确认充值
    function ConfirmRecharge(){
    	BASE.MYajax({
            'pathName': 'recharge/apply', //请求路径
            'methods': 'post',
            'ajaxData': {
                values: {
                    card_id:card_id
                }
            },
            'method': applyData //调用函数
        });
    }
    function applyData(ret, err) {
    	if(ret.code==200||ret.code==251){
    		console.log('已经充值啦啦啦啦啦');
        console.log(JSON.stringify(ret));
            api.openWin({
                name: 'online-payment_2',
                url: '../html/online-payment_2.html',
                pageParam:{
                  //  1.服务内容,2.支付金额,3.订单ID,4.下单时间,5.订单编号
                  project:ret.data.desc,
                  Service_price:ret.data.pay_amount,
                  OrderId: ret.data.orders_id,
                  created_order:ret.data.updated_at,
                  order_num:ret.data.orders_sn
                }
            })
    	}else{
    		reToast(ret, err)
    	}
    }

   /* function openDialog() {
        demotxt.style.display = "block";
        demobg.style.display = "block";
    }

    function closeDialog() {
        demotxt.style.display = "none";
        demobg.style.display = "none";
    }*/
</script>

</html>
